<template>
  <div class="commoditiesList">
    <el-card class="searchBar" shadow="never">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="查询条件" name="1">
          <el-form
            ref="form"
            :inline="true"
            :model="searchForm"
            class="demo-form-inline"
            size="mini"
          >
            <el-form-item>
              <el-input
                v-model="searchForm.name"
                placeholder="商品名称/模糊查询"
              />
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchForm.productSn" placeholder="商品货号" />
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.brandId"
                placeholder="品牌"
                clearable
              >
                <el-option
                  v-for="item in brandList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.publishStatus"
                clearable
                placeholder="上架状态"
              >
                <el-option label="上架" value="1" />
                <el-option label="未上架" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchForm.verifyStatus"
                clearable
                placeholder="审核"
              >
                <el-option label="未审核" value="0" />
                <el-option label="审核" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="onSearch"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <el-card class="formTable">
      <div class="addBtn">
        <el-button size="mini" type="primary" @click="AddCommodity"
          >新增</el-button
        >
        <el-button size="mini" type="primary" @click="AddCommodity"
          >导出商品excel文件</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-card>
          <el-card class="main-header" shadow="never" />
          <el-table-column label="序号" fixed type="index" align="center" />
          <el-table-column label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.pic"
              />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name" align="center" />
          <el-table-column label="商品品牌" prop="brandName" align="center" />
          <el-table-column label="商品价格" prop="price" align="center">
            <template slot-scope="scope">
              <div class="start">
                商品价格:<span style="text-decoration: line-through">{{
                  scope.row.price
                }}</span>
              </div>
              <div class="end">
                促销价格:
                <span style="color: #f00"> {{ scope.row.promotionPrice }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="商品类型"
            prop="productCategoryName"
            align="center"
          />
          <el-table-column label="标签1" align="center">
            <template slot-scope="scope">
              <div>
                <div style="padding-bottom: 10px">
                  最新:
                  <el-switch
                    v-model="scope.row.newStatus"
                    :active-value="1"
                    :inactive-value="0"
                    @change="switchNewStatus(scope.row)"
                  />
                </div>
                <div>
                  推荐:
                  <el-switch
                    v-model="scope.row.recommendStatus"
                    :active-value="1"
                    :inactive-value="0"
                    @change="switchRecommandStatus(scope.row)"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签2" align="center">
            <template slot-scope="scope">
              <div>
                <div style="padding-bottom: 10px">
                  发布:
                  <el-switch
                    v-model="scope.row.publishStatus"
                    :active-value="1"
                    :inactive-value="0"
                    @change="switchPublishStatus(scope.row)"
                  />
                </div>
                <div>
                  审核:
                  <el-switch
                    v-model="scope.row.verifyStatus"
                    :active-value="1"
                    :inactive-value="0"
                    @change="switchVerifyStatus(scope.row)"
                  />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="编辑sku" align="center">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" plain type="text">编辑sku</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="重量" align="center" prop="weight" />
          <el-table-column label="排序" align="center" prop="sort" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                style="color: #f00"
                @click="EditCommodity(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-card>
      </el-table>
      <!-- 分页 -->
      <div class="main-footer">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import mixins from '@/mixins/index.js'
import { findAllBrand } from '@/api/commodities/brandList/index'
import {
  productsByPage,
  delProductAndSkus,
  switchVerifyStatus,
  switchRecommandStatus,
  switchPublishStatus,
  switchNewStatus
} from '@/api/commodities/commoditiesList/index'
export default {
  mixins: [mixins],
  data() {
    return {
      tableData: [],
      activeNames: [''],
      brandList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 获得文章列表
    init() {
      var params = {}
      // 如果查询输入不为空  克隆
      for (var key in this.searchForm) {
        if (this.searchForm[key] || this.searchForm[key] + '' === '0') {
          params[key] = this.searchForm[key]
        }
      }
      productsByPage(this.page.currentPage, this.page.pageSize, params).then(
        (res) => {
          this.tableData = res.data.rows
          this.page.total = res.data.total
        }
      )
      // 查询所有品牌分类
      findAllBrand().then((res) => {
        console.log(res)
        this.brandList = res.data.items
      })
    },
    // 搜索
    onSearch() {
      this.page.currentPage = 1
      this.init()
    },
    // 重置
    onReset() {
      // 清空输入表单 this.$options.data()初始化的vue数据
      this.searchForm = this.$options.data().searchForm
      this.init()
    },
    // 切换最新状态
    switchNewStatus(val) {
      var flag = val.isShow === 0 ? 1 : 0
      switchNewStatus({
        productId: val.id,
        status: val.newStatus
      }).then((res) => {
        if (res.success) {
          this.$message.success('状态更改成功')
        } else {
          val.isShow = flag
          this.$message.error('状态更改失败')
        }
      })
    },
    // 切换推荐状态
    switchRecommandStatus(val) {
      var flag = val.isShow === 0 ? 1 : 0
      switchRecommandStatus({
        productId: val.id,
        status: val.recommendStatus
      }).then((res) => {
        if (res.success) {
          this.$message.success('状态更改成功')
        } else {
          val.isShow = flag
          this.$message.error('状态更改失败')
        }
      })
    },
    // 切换发布状态
    switchPublishStatus(val) {
      var flag = val.publishStatus === 0 ? 1 : 0
      switchPublishStatus({
        productId: val.id,
        status: val.publishStatus
      }).then((res) => {
        if (res.success) {
          this.$message.success('状态更改成功')
        } else {
          val.isShow = flag
          this.$message.error('状态更改失败')
        }
      })
    },
    // 切换审核状态
    switchVerifyStatus(val) {
      var flag = val.verifyStatus === 0 ? 1 : 0
      switchVerifyStatus({
        productId: val.id,
        status: val.verifyStatus
      }).then((res) => {
        if (res.success) {
          this.$message.success('状态更改成功')
        } else {
          val.isShow = flag
          this.$message.error('状态更改失败')
        }
      })
    },
    // 跳转到修改页面
    EditCommodity(val) {
      this.$router.push({ name: 'EditCommodity', params: { id: val } })
    },
    // 删除商品
    handleDelete(id) {
      this.delData(id, delProductAndSkus)
    },
    // 跳转到添加商品页面
    AddCommodity() {
      this.$router.push({ name: 'AddCommodity', params: { id: '' } })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
